<style>
  body {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 720px;
    background: url(images/index-bg.jpg);
    background-color: transparent;
  }

  #main-0 {
    position: absolute;
    top: 140px;
    left: 50px;
  }

  #main-0 .item {
    position: absolute;
    background: url(images/loading-placeholder.png) repeat;
  }

  #main-0- {
    width: 220px;
    height: 260px;
  }

  #main-0-0,
  #main-0-1 {
    width: 220px;
    height: 120px;
  }

  #main-0-0 {
    top: 280px;
  }

  #main-0-1 {
    top: 420px;
  }

  #main-1 {
    position: absolute;
    left: 290px;
    top: 140px
  }

  #main-1 .item {
    position: absolute;
    background: url(images/loading-placeholder.png) repeat;
    width: 220px;
    height: 260px;
  }

  #main-1-0.item {
    height: 260px;
    width: 460px;
    left: 0;
  }

  #main-1-1 {
    left: 480px;
  }

  #main-1-2 {
    left: 720px
  }

  #main-1-3,
  #main-1-4,
  #main-1-5,
  #main-1-6 {
    top: 280px
  }

  #main-1-4 {
    left: 240px
  }

  #main-1-5 {
    left: 480px
  }

  #main-1-6 {
    left: 720px
  }

  #main-0 #main-0- {
    background: url(images/page3-main0-0.png) no-repeat;

  }

  #main-0- .rules {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 120px;
    line-height: 40px;
    font-size: 22px;
    color: #fff;
  }

  #main-0- .rules div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goods-container {
    background: #fff;
    height: 260px;
  }

  .goods-container .goods-img {
    width: 220px;
    height: 180px;
  }

  .goods-container .goods-img img {
    width: 100%;
    height: 100%;
  }

  .goods-container .goods-info {
    height: 80px;
    line-height: 30px;
    font-size: 20px;
    padding: 10px 10px;
    color: #000;
  }

  .goods-container .item-view,
  .goods-container .number {
    height: 30px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .goods-container .item-text {
    position: absolute;
  }

  .goods-container .color {
    color: #ff6600;
  }

  .goods-container .color-gray {
    color: #4f4f4f
  }
</style>


<div id="main-0">
  <div id="main-0-" class="item">
    <div class="rules">
      <div>TV币：562</div>
      <div>活跃值：6875251202</div>
      <div>1TV币=100活跃值</div>
    </div>
  </div>
  <div id="main-0-0" class="item item-focus">
    <img src="images/page3-main0-1.png" alt="">
  </div>
  <div id="main-0-1" class="item item-focus">
    <img src="images/page3-main0-2.png" alt="">
  </div>
</div>
<div id="main-1">
  <div id="main-1-0" class="item item-focus"></div>
  <div id="main-1-1" class="item item-focus">
    <div class="goods-container">
      <div class="goods-img">
        <img src="images/template/page3-0.png" alt="">
      </div>
      <div class="goods-info">
        <div class="item-view">
          <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品熊猫创意文创礼品</div>
        </div>
        <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
            class="color">TV币</span></div>
      </div>
    </div>
  </div>
  <div id="main-1-2" class="item item-focus">
    <div class="goods-container">
      <div class="goods-img">
        <img src="images/template/page3-0.png" alt="">
      </div>
      <div class="goods-info">
        <div class="item-view">
          <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品熊猫创意文创礼品</div>
        </div>
        <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
            class="color">TV币</span></div>
      </div>
    </div>
  </div>
  <div id="main-1-3" class="item item-focus">
    <div class="goods-container">
      <div class="goods-img">
        <img src="images/template/page3-0.png" alt="">
      </div>
      <div class="goods-info">
        <div class="item-view">
          <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品熊猫创意文创礼品</div>
        </div>
        <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
            class="color">TV币</span></div>
      </div>
    </div>
  </div>
  <div id="main-1-4" class="item item-focus">
    <div class="goods-container">
      <div class="goods-img">
        <img src="images/template/page3-0.png" alt="">
      </div>
      <div class="goods-info">
        <div class="item-view">
          <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品熊猫创意文创礼品</div>
        </div>
        <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
            class="color">TV币</span></div>
      </div>
    </div>
  </div>
  <div id="main-1-5" class="item item-focus">
    <div class="goods-container">
      <div class="goods-img">
        <img src="images/template/page3-0.png" alt="">
      </div>
      <div class="goods-info">
        <div class="item-view">
          <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品熊猫创意文创礼品</div>
        </div>
        <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
            class="color">TV币</span></div>
      </div>
    </div>
  </div>
  <div id="main-1-6" class="item item-focus">
    <div class="goods-container">
      <div class="goods-img">
        <img src="images/template/page3-0.png" alt="">
      </div>
      <div class="goods-info">
        <div class="item-view">
          <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品熊猫创意文创礼品</div>
        </div>
        <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
            class="color">TV币</span></div>
      </div>
    </div>
  </div>
</div>



<script>
  function _init() {
    onFocus();
    getLog({
      programId: TYPEIDS.MAIN4,
      programName: '国宝文创',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
  }

  _init()

  function keyUp() {
    if (loading) return;
    var index = area[focusArea].index;
    switch (focusArea) {
      case 2:
        if (index > 0) {
          freeFocus()
          area[focusArea].index--;
          onFocus()
        } else {
          freeFocus()
          focusArea = 0
          onFocus()
        }
        break;
      case 3:
        if (index == 0 || index == 1) {
          freeFocus()
          focusArea = 0
          onFocus()
        } else if (index == 2) {
          freeFocus()
          focusArea = 1;
          onFocus()
        } else if (index == 3 || index == 4) {
          freeFocus()
          area[focusArea].index = 0
          onFocus()
        } else if (index == 5) {
          freeFocus()
          area[focusArea].index = 1
          onFocus()
        } else if (index == 6) {
          freeFocus()
          area[focusArea].index = 2
          onFocus()
        }
        break;
    }
  }

  function keyDown() {
    if (loading) return;
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        freeFocus()
        focusArea = 3;
        area[focusArea].index = 0;
        onFocus()
        break;
      case 1:
        freeFocus()
        focusArea = 3;
        area[focusArea].index = 2;
        onFocus()
        break;
      case 2:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          freeFocus()
          area[focusArea].index++;
          onFocus()
        }
        break;
      case 3:
        if (index == 0) {
          freeFocus()
          area[focusArea].index = 3
          onFocus()
        } else if (index == 1) {
          freeFocus()
          area[focusArea].index = 5
          onFocus()
        } else if (index == 2) {
          freeFocus()
          area[focusArea].index = 6
          onFocus()
        }
        // if (index != 0 && index != 3) {
        //   area[focusArea].index--;
        // }
        break;
    }

  }

  function keyLeft() {
    if (loading) return;
    // window.location.href = PANDA_PATH + 'index.html'
    var index = area[focusArea].index;
    freeFocus()
    switch (focusArea) {
      case 0:
        renderMain(2)
        break;
      case 1:
        if (index > 0) {
          area[focusArea].index--
        } else {
          focusArea = 0;
          // renderMain(3)
        }
        break;
      case 2:

        break;
      case 3:
        if (index == 0) {

        } else if (index == 3) {
          focusArea = 2;
          area[focusArea].index = 0;
        } else {
          area[focusArea].index--;
        }
        break;
    }
    onFocus()

  }

  function keyRight() {
    if (loading) return;
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        freeFocus()
        focusArea = 1;
        area[focusArea].index = 0;
        onFocus()
        break;
      case 1:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          freeFocus()
          area[focusArea].index++;
          onFocus()
        }
        break;
      case 2:
        freeFocus()
        focusArea = 3;
        area[focusArea].index = 3;
        onFocus()
        break;
      case 3:
        if (index != 2 && index != 6) {
          freeFocus()
          area[focusArea].index++;
          onFocus()
        }
        break;
    }
  }

  function keyEnter() {
    if (loading) return;
    isNeed = 1;
    var index = area[focusArea].index;
    var form = PANDA_PATH + "index.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&HEADER=' + area[0].index;
    switch (focusArea) {
      case 1:
      if (index == 0) {
          // window.location.href = PANDA_PATH + 'search.html';
          GY.addUrl(PANDA_PATH + 'search.html' , form);
        } else if (index == 1) {
          // window.location.href = PANDA_PATH + 'favorite.html';
          GY.addUrl(PANDA_PATH + 'favorite.html', form);
        } else if (index == 2) {
          // window.location.href = PANDA_PATH + 'history.html';
          GY.addUrl(PANDA_PATH + 'history.html', form);
        }
        break;
      case 2:
        if (index == 1) {
          window.location.href = PANDA_PATH + 'goods-all.html';
        } else if (index == 0) {
          window.location.href = PANDA_PATH + 'active.html'
        }
        break;
      case 3:
        break;
    }
  }
</script>